<template>
	<view class="wrap play-detail-wrap">
		<view class="inner-wrap detail-wrap">
			<!-- 顶部 -->
			<header class="article-header">
				<view class="cover-thumb">
					<img :src="image">
				</view>
				<view class="play-author">
					<text class="info">煜华姐</text>
					<view class="avatar-wrap">
						<a href="">
							<img src="https://tva1.sinaimg.cn/crop.0.0.664.664.50/006wwWLWjw8f5q8q2qp2oj30ig0igdgt.jpg?KID=imgbed,tva&Expires=1592570888&ssig=DF4mKk1bTf">
						</a>
					</view>
				</view>
			</header>
		</view>
	</view>
</template>

<script>
    export default{
        props:{
            image:{
                type:String
            }
        }
    }
</script>

<style>
    @import '/static/css/reset.css';
	.play-detail-wrap {
	    width: 100%;
	    padding-bottom: 0px;
	    background: #fff;
	}
	
	.inner-wrap {
	    width: 100%;
	}
	
	.play-detail-wrap .article-header {
	    position: relative;
	}
	
	.play-detail-wrap .article-header .cover-thumb {
	    height: 200px;
	    overflow: hidden;
	    position: relative;
	}
	
	.play-detail-wrap .article-header .play-author {
	    width: 100%;
	    padding: 0 6%;
	    position: absolute;
		bottom: -2rem;
		text-align: right;
		color: #fff;
	}
	
	.play-detail-wrap .article-header .play-author .info {
	    display: inline-block;
	    vertical-align: top;
	    font-size: 0.8rem;
	    padding-top: .5rem;
	}
	
	.play-detail-wrap .article-header .play-author .avatar-wrap {
	    display: inline-block;
	    width: 4rem;
	    height: 4rem;
	    border-radius: 50%;
	    padding: .3rem;
	    background: #fff;
	    margin-left: 1rem;
	    margin-right: 0px;
	    overflow: hidden;
	    vertical-align: middle;
	}
	
	.play-detail-wrap .article-header .play-author .avatar-wrap img {
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	    border-radius: 50%;
	}

</style>
